<template>
    <el-breadcrumb separator-icon="ArrowRight" style="margin-bottom: 50px;">
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="modifyPasswordRef" :model="data.form" status-icon :rules="data.form_rules" label-width="120px">
        <el-form-item label="旧密码：" prop="originpassword">
            <el-input type="password" v-model="data.form.originpassword" prefix-icon="Lock" placeholder="请输入旧密码"
                show-password></el-input>
        </el-form-item>
        <el-form-item label="设置新密码：" prop="newpassword">
            <el-input type="password" v-model="data.form.newpassword" prefix-icon="Lock" placeholder="请输入新密码"
                show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="passwords">
            <el-input type="password" v-model="data.form.passwords" prefix-icon="Lock" placeholder="请再次确认新密码"
                show-password></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="submitForm('addRuleForm')">提交</el-button>
            <el-button type="danger" @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { reactive, getCurrentInstance, onMounted } from 'vue';
import { ModifyPassword } from "../../api/http.js"
import { useRouter, useRoute } from "vue-router";
import { validate_password } from "../../utils/validate";
export default {
    name: "ModifyPassword",
    setup(props) {
        const { proxy } = getCurrentInstance()
        const { query } = useRoute();
        const { go } = useRouter();
        var getuserid = localStorage.getItem("userid")
         //校验旧密码
         const validate_originpassword_rules = (rule, value, callback) => {
            let regPassword = validate_password(value);
            if (value === '') {
                callback(new Error("请输入旧密码"));
            } else if (!regPassword) {
                callback(new Error("请输入>=6并且<=20位的密码，包含数字、字母"));
            } else {
                callback();
            }
        }
        //校验新密码
        const validate_newpassword_rules = (rule, value, callback) => {
            let regPassword = validate_password(value);
            const passwordValue = data.form.originpassword;
            if (value === '') {
                callback(new Error("请输入新密码"));
            } else if (!regPassword) {
                callback(new Error("请输入>=6并且<=20位的密码，包含数字、字母"));
            } else if (passwordValue && passwordValue === value) {
                callback(new Error("与旧密码重复"));
            } else {
                callback();
            }
        }
        // 校验确认密码
        const validate_passwords_rules = (rule, value, callback) => {
            let regPassword = validate_password(value);
            // 获取“密码”
            const passwordValue = data.form.newpassword;
            if (value === '') {
                callback(new Error("请再次输入新密码"));
            } else if (!regPassword) {
                callback(new Error("请输入>=6并且<=20位的密码，包含数字、字母"));
            } else if (passwordValue && passwordValue !== value) {
                callback(new Error("两次密码不一致"));
            } else {
                callback();
            }
        }

        //form表单
        const data = reactive({
            form: {
                originpassword: "", // 旧密码
                newpassword:"",    //新密码
                passwords: "",     // 确认密码
            },
            form_rules: {
                originpassword: [
                    { validator: validate_originpassword_rules, trigger: 'change', required: true, }
                ],
                newpassword: [
                    { validator: validate_newpassword_rules, trigger: 'change', required: true, }
                ],
                passwords: [
                    { validator: validate_passwords_rules, trigger: 'change', required: true, }
                ],
            },
        })

        const submitForm = () => {
            const requestData = {
                userid:getuserid,
                originpassword:data.form.originpassword,
                newpassword:data.form.newpassword,
            }
            proxy.$refs.modifyPasswordRef.validate((valid) => {
                if (valid) {
                    ModifyPassword(requestData).then(response => {
                        console.log(requestData)
                        const resData = response.data
                        if(resData.code === 200){
                        proxy.$message.success(response.data.message);
                        }else{
                        proxy.$message.error(response.data.message);
                        }
                        // 重置表单
                        resetForm()
                    })
                    console.log('success submit!!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }

        // 重置
        const resetForm = () => {
            proxy.$refs.modifyPasswordRef.resetFields();
        }

        return {
            data,
            submitForm,
            resetForm,
        }
    }
}
</script>

<style scoped></style>  